<template>
  <div>
    <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">{{ getTitle }}{{ obj.name }}</span>
      <el-dropdown-menu v-show="showMenu" slot="dropdown">
        <el-dropdown-item v-if="isedit&&obj.level!==4" command="append">添加子节点</el-dropdown-item>
        <el-dropdown-item v-if="isedit&&obj.level!==1" command="edit">编辑节点</el-dropdown-item>
        <el-dropdown-item v-if="isedit&&obj.level!==1" command="del">删除节点</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog title="编辑OKR" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form v-if="dialogFormVisible" ref="ruleForm" :model="form" :rules="rules">
        <el-form-item :label="getLabel" prop="name">
          <el-input v-if="label!==4" v-model="form.name" autocomplete="off" />
          <el-cascader
            v-else
            ref="cascaderAddr"
            v-model="form.skill"
            style="width:100%"
            :show-all-levels="false"
            :options="skills"
            :props="props"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="权重" prop="weight">
          <el-input v-model="form.weight" type="number" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset">取 消</el-button>
        <el-button type="primary" @click="okrsave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    obj: {
      type: Object,
      default: undefined
    },
    callback: {
      type: Function,
      default: undefined
    },
    isedit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      props: { label: 'name', value: 'id' },
      showMenu: false,
      dialogFormVisible: false,
      form: {
        name: '',
        weight: 0,
        skill: []
      },
      rules: {
        name: [
          { required: true, message: '请输okr名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '请输权重值', trigger: 'blur' }
        ]
      },
      title: {
        '1': '',
        '2': 'Objectives:',
        '3': 'Key Result:',
        '4': 'Capability:'
      },
      label: '1',
      skills: []
    }
  },
  computed: {
    getTitle() {
      return this.title[this.obj.level]
    },
    getLabel() {
      return this.title[this.label]
    }
  },
  watch: {
    label: {
      handler(val, oldVal) {
        if (val === 4) {
          this.getSkills()
        }
      }
    }
  },
  methods: {
    reset() {
      this.dialogFormVisible = false
      this.form = {
        name: '',
        weight: 0,
        skill: []
      }
    },
    handleCommand(command) {
      this[command]()
    },
    append() {
      this.form.parentid = this.obj.id
      this.form.level = 1 + this.obj.level
      this.label = 1 + this.obj.level
      this.dialogFormVisible = true
    },
    edit() {
      this.label = this.obj.level
      this.form.id = this.obj.id
      this.form.name = this.obj.name
      this.form.weight = this.obj.weight
      if (this.label === 4) {
        this.form.skill = []
        const array = this.obj.skill.split(',')
        for (let i = 0; i < array.length; i++) {
          this.form.skill.push(parseInt(array[i]))
        }
      }
      this.dialogFormVisible = true
    },
    del() {
      this.$confirm('确定要删除该节点吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.get('/okr/del', (response) => {
          this.reset()
          this.callback()
        }, { id: this.obj.id })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    okrsave() {
      this.post('/okr/save', 'ruleForm', (response) => {
        this.reset()
        this.callback()
      }, this.form)
    },
    getSkills() {
      this.get('skill/list', result => {
        this.skills = result.data
      }, { id: 0, isDel: 1 })
    },
    handleChange(e, form, thsAreaCode) {
      const arr = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels
      this.form.name = arr[arr.length - 1]
    }
  }
}
</script>
<style scoped>
</style>
